import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class DividerPage extends PageWithTitle {
  const DividerPage({super.key}) : super("间隔线(Divider、VerticalDivider)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("Flutter居然还准备了间隔线组件，一般用于分隔不同内容的区块"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("Divider"),
      BodyText("水平间隔线，Flutter基于基础组件封装，应用主题颜色方便统一配置"),
      PrimaryHeaderLabelText("height", "组件高度(宽度默认取最大值)"),
      PrimaryHeaderLabelText("thickness", "间隔线宽度，居中绘制"),
      PrimaryHeaderLabelText("indent endIndent", "前后留白"),
      PrimaryHeaderLabelText(
        "color",
        "指定间隔线颜色>",
        "主题配置dividerTheme.color>",
        "默认色colorScheme.outlineVariant",
      ),
      AppSpacer.large,
      UlItem("VerticalDivider"),
      BodyText("垂直间隔线，其余属性与间隔线一致"),
      PrimaryHeaderLabelText("width", "组件宽度(高度默认取最大值)"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return const Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Divider(
          height: 10,
        ),
        Divider(height: 10, thickness: 5),
        Divider(
          height: 10,
          thickness: 5,
          indent: 10,
          endIndent: 10,
        ),
        SizedBox(
          height: 40,
          child: Row(
            children: [
              VerticalDivider(
                width: 10,
                color: Colors.green,
              ),
              VerticalDivider(width: 10, thickness: 5),
              VerticalDivider(
                width: 10,
                thickness: 5,
                indent: 10,
                endIndent: 10,
              ),
            ],
          ),
        )
      ],
    );
  }
}
